<template>
    <div class="profile">
      <div class="card">
        <img src="@/assets/bac/Login-bac.jpg" class="background-image" />
        <el-menu :default-active="activeTab" class="menu">
          <el-menu-item index="profile" @click="activeTab = 'profile'">个人资料</el-menu-item>
          <el-menu-item index="password" @click="activeTab = 'password'">密码安全</el-menu-item>
        </el-menu>
        <el-card>
          <component :is="currentComponent" />
        </el-card>
      </div>
    </div>
  </template>
  
  <script>
  import ProfileInfo from '@/components/Profile/ProfileInfo.vue'
  import PasswordSecurity from '@/components/Profile/PasswordSecurity.vue'
  
  export default {
    data() {
      return {
        activeTab: 'profile',
      }
    },
    computed: {
      currentComponent() {
        return this.activeTab === 'profile' ? ProfileInfo : PasswordSecurity
      }
    }
  }
  </script>
  
  <style scoped>
  .profile {
    padding: 20px;
  }
  
  .card {
    border-radius: 10px;
    overflow: hidden;
    position: relative;
  }
  
  .background-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
  }
  
  .menu {
    background-color: #f5f5f5;
    border-bottom: none;
  }
  
  .el-card {
    padding: 20px;
  }
  </style>
  